<template>
  <div id="page-sms-recharge">
    <h2>短信充值</h2>

    <card>
      <p>短信剩余条数：{{sms.surplus}}</p>
      <p>短信发送总条数：{{sms.total}}&nbsp;&nbsp;本月发送条数：{{sms.send}}</p>
    </card>

    <card class="mt20">
      <h3 class="tc">短信充值历史</h3>
      <div class="m20 clearfix">
        <Button type="info" class="fr" @click="recharge()">短信充值</Button>
      </div>
      <Table border :columns="columns" :data="list" class="mt20" :loading="loading"></Table>

      <div class="m10 clearfix" v-if="page.total > 0">
        <div class="fr">
          <Page
            show-total
            :total="page.total"
            :current="query.currentPage"
            @on-change="onChangePage">
          </Page>
        </div>
      </div>
    </card>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import moment from 'moment'
  import financeApi from '@/api/finance'

  export default {
    name: 'page-sms-recharge',
    data () {
      return {
        loading: false,
        query: {
          pkRclubInfo: null,
          currentPage: 1,
          limit: 10
        },
        page: {
          total: 0
        },
        columns: [
          {
            title: '序号',
            width: 50,
            render: (h, params) => {
              return (this.query.currentPage - 1) * this.query.limit + params.row._index + 1
            },
            align: 'center'
          },
          {
            title: '充值金额(元)',
            key: 'reMoney',
            width: 120,
            align: 'center'
          },
          {
            title: '充值条数',
            key: 'reCount',
            width: 100,
            align: 'center'
          },
          {
            title: '充值单号',
            key: 'reNo',
            align: 'center'
          },
          {
            title: '充值时间',
            key: 'reTime',
            width: 180,
            render: (h, params) => {
              let { row } = params
              return row.reTime ? moment(row.reTime).format('YYYY-MM-DD HH:mm:ss') : '-'
            },
            align: 'center'
          },
          {
            title: '支付时间',
            key: 'payTime',
            width: 180,
            render: (h, params) => {
              let { row } = params
              return row.payTime ? moment(row.payTime).format('YYYY-MM-DD HH:mm:ss') : '-'
            },
            align: 'center'
          },
          {
            title: '充值状态',
            key: 'reStatus',
            width: 80,
            render: (h, params) => {
              let { row } = params
              if (row.reStatus === 0) {
                return '已支付'
              } else if (row.reStatus === 1) {
                return '未支付'
              } else if (row.reStatus === -1) {
                return '支付失败'
              }
            },
            align: 'center'
          },
          {
            title: '操作',
            width: 80,
            render: (h, params) => {
              let { row } = params
              if (row.reStatus !== 0) {
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.goPay(params.row)
                      }
                    }
                  }, '去支付')
                ])
              }
            },
            align: 'center'
          }
        ],
        sms: {
          surplus: 0, // 剩余条数
          total: 0, // 总条数
          send: 0 // 发送条数
        },
        list: []
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    watch: {
      'query.currentPage': 'getList'
    },
    methods: {
      onChangePage (currentPage) {
        this.query.currentPage = currentPage
      },
      async detail () {
        this.query.pkRclubInfo = this.userInfo.pkRclubInfo
        const { body } = await financeApi.smsRechargeInfo(this.query)
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          let data = body.responseData.content[0]
          this.sms.surplus = data.surplusCount
          this.sms.total = data.totalCount
          this.sms.send = data.usedCount
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      },
      async getList () {
        this.query.pkRclubInfo = this.userInfo.pkRclubInfo
        const { body } = await financeApi.smsRechargeList(this.query)
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.list = body.responseData.content
          this.page.total = body.responseData.totalElements
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      },
      goPay (row) {
        this.$router.push(`/finance/sms-recharge-confirm/${row.pkRechargeDetail}`)
      },
      recharge () {
        this.$router.push('/finance/sms-recharge')
      }
    },
    mounted () {
      this.detail()
      this.getList()
    }
  }
</script>
